<template>
  <div class="custom-button-node">
    <Handle id="node-top" type="target" :position="Position.Top" />
    <Handle id="node-left" type="target" :position="Position.Left" />
    <button>{{ data.label }}</button>
    <Handle id="node-bottom" type="source" :position="Position.Bottom"  />
    <Handle id="node-right" type="source" :position="Position.Right" />
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import {Handle, Position} from "@vue-flow/core";

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  data: {
    type: Object,
    default: () => ({})
  }
});
</script>

<style scoped>
.custom-button-node {
  position: relative;
}

.custom-button-node button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

.handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #28a745;
  border-radius: 50%;
}

.top {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.bottom {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.left {
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
}

.right {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
}
</style>